<template>
  <transition name="el-fade-in-linear">
    <div v-if="visible" class="getMemDia">
      <div class="shadow" @click="close"></div>
      <div class="transfer">
        <div class="el-dialog__header">
          <span class="el-dialog__title">{{tstitle}}</span>
        </div>
        <div class="con">
          <el-transfer
            :filterable="hasSearch"
            :filter-placeholder="tplaceholder"
            v-model="val"
            :data="members"
            :titles='[tctitle,"已选择"]'>
          </el-transfer>
        </div>
        <el-button size="small" @click="getCheckeds" type="primary">确定</el-button>
        <el-button size="small" @click="close" type="primary">取消</el-button>
      </div>
    </div>
  </transition>
</template>
<script>
  export default {
    props : ['members','checkedMembers','title','childTitle','stitle','ctitle','placeholder'],
    data(){
      return {
        val: [],
        visible : false,
        tstitle : this.stitle || "选择员工",
        tctitle : this.ctitle || '员工列表',
        hasSearch : true,
        tplaceholder : this.placeholder || '请输入员工姓名'
      }
    },
    created(){
      this.checkedMembers.forEach((v)=>{
        this.val.push(v.key)
      })
      if(this.title){
        this.stitle=this.title
        this.hasSearch = false
        this.ctitle = this.childTitle
      }
    },
    watch : {
      checkedMembers(n){
        this.val = []
        n.forEach((v)=>{
          this.val.push(v.key)
        })
      }
    },
    methods: {
      close(){
        this.visible = false
      },
      getCheckeds(){
        var val = []
        this.members.forEach((v)=>{
          this.val.forEach((value) => {
            if(value == v.key)val.push(v)
          })
        })
        this.visible = false
        this.$emit('getCheckedMembers',val)
      }
    }
  };
</script>

<style lang="scss" scoped>
.getMemDia{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 3000;
  .shadow{
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .4;
  }
  .transfer{
    width: 650px;
    height: 420px;
    margin: 15vh auto;
    background: white;
    position: relative;
    .con{
      margin: auto;
      width: 582px;
    }
    button{
      float: right;
      margin: 15px 20px 0 0;
    }
  }
}
</style>
